import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker, Row, Col, Tree, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiGetGoodsClassifyTreeAll } from '@/request/mallManagement/index.jsx'
import { apiStockLibraryManageSkuPage, apistockLibraryGoodsWarning } from '@/request/storageManager/store.js'
import { apiStoreInfoList } from '@/request/storeInfo/index.jsx'
import WarnTable from './components/warn'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
const { DirectoryTree } = Tree;
const { Option } = Select
export default class OutPut extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {
            treeData: [

            ],
            columns: [
                {
                    title: "物料编码",
                    dataIndex: "goodsSkuNo",
                    key: "goodsSkuNo",
                    render: (text, render) => {
                        return text
                    }
                },
             
                {
                    title:'物料名称',
                    dataIndex:'materialName',
                    key:'materialName',
                    render:(text) => {
                        return text
                    }
                },
                {
                    title: "商品名称",
                    dataIndex: "goodsName",
                    key: "goodsName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "规格",
                    dataIndex: "sku",
                    key: "sku",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "物品分类",
                    dataIndex: "goodsClassifyName",
                    key: "goodsClassifyName",
                    render: (text, render) => {
                        return text
                    }
                },
                {
                    title: "所属门店",
                    dataIndex: "storeName",
                    key: "storeName",
                    render: (text, render) => {
                        return text
                    }

                },
                {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    fixed: 'right',
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:store:goodsWarn']} onClick={() => this.warnList(render)} >库存预警</TheButton>

                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10
            },
            pageWarn: {
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            isModalVisible: false,
            tree: [],
            name: '',
            storeId: '',
            rowStoreId: '',
            goodsClassifyId: '',
            goodsSkuNo: '',
            storeList: [],
            newColumns: [],
            form_show: true,
            searchOption: [
                // { field: 'goodsSkuNo', label: '物品编码', placeholder: '物品编码', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'name', label: '物料名称', placeholder: '物料名称', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'materialId', label: '物料ID', placeholder: '物料ID', required: false, rules: [], type: 'Input', defaultValue: '' },
                { field: 'storeId', label: '门店', placeholder: '门店',value:'storeId',txt:'storeName', required: false, rules: [], type: 'Select', options: [], defaultValue: '' },
            ],
            queryForm: {},
        }
    }
    componentDidMount() {
        this.onColumnsFilter(this.state.columns)
        this.getData()
        this.getStoreInfoList()
    }
    async getStoreInfoList() {
        let res = await apiStoreInfoList({ storeStatus: "Y" })
        if (res.code === 0) {
            this.state.searchOption[2].options=res.data
            this.setState(
                {
                    storeList: res.data,
                    searchOption:this.state.searchOption
                }
            )
        }
    }
    async warnList(row) {
        let res = await apistockLibraryGoodsWarning({ goodsSkuId: row.goodsSkuId, dataId: row.storeId })
        if (res.code === 0) {
            this.setState({
                isModalVisible: true,
                rowStoreId: row.storeId,
                goodsSkuNo: row.goodsSkuNo,
                warnData: res.data.map(item => {
                    return {
                        key: item.libraryId,
                        ...item
                    }
                }),
                modalTitle: `为【${row.goodsName}】设置库存预警`
            })
        }

    }
    async getListByTree(values) {
        this.setState({
            queryForm: values === undefined ? this.state.queryForm : { ...values }
        }, async () => {
            let { pageNo, pageSize } = this.state.pageData
            let res = await apiStockLibraryManageSkuPage({
                pageNo,
                pageSize,
                ...this.state.queryForm,
                goodsClassifyId: this.state.goodsClassifyId ? this.state.goodsClassifyId : "",
            })
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data.records,
                    total: res.data.total
                })
            }
        })
       
    }
    async getData(level, sourceId) {
        let res = await apiGetGoodsClassifyTreeAll()
        if (res.code === 0) {
            let data = this.guide(res.data)
            this.setState({
                treeData: data
            }, () => {

                console.log(this.state.treeData);
            })
        }
    }
    guide(data) {
        return data.map(item => {
            if (item.hasOwnProperty('children') && item.children && item.children.length > 0) {
                return {
                    title: item.label,
                    key: item.value,
                    children: this.guide(item.children),
                }
            } else {
                return {
                    title: item.label,
                    key: item.value,

                }
            }

        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getListByTree()
        })
    };

    

    onSelect = (e) => {
        this.setState({
            goodsClassifyId: e
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }
    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }
    onFormSearch(values){
        this.setState({
            pageData:{pageNo:1,pageSize:10}
        },()=>{
            this.getListByTree(values)
        })
    }
    render() {
        let { columns, dataSource, modalTitle, warnData, rowStoreId, goodsSkuNo, storeList, form_show, searchOption, newColumns, pageData, total, treeData, isModalVisible } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                <Row gutter={20}>
                    <Col span={8}>
                        <DirectoryTree
                            multiple
                            defaultExpandAll
                            treeData={treeData}
                            onSelect={this.onSelect}
                        />
                    </Col>
                    <Col span={16}>
                        {/* <Form layout={'inline'} ref={this.formRef} onFinish={this.onFinish} style={{ marginBottom: 12 }}>
                            <Form.Item name={"name"}>
                                <Input style={{ width: 240 }} suffix={<SearchOutlined />} placeholder={"物品名称"} />
                            </Form.Item>
                            <Form.Item name={"storeId"}>
                                <Select style={{ width: 240 }} placeholder={'请选择门店'}>
                                    {
                                        storeList.map(item => {
                                            return <Option value={item.storeId}>{item.storeName}</Option>
                                        })
                                    }

                                </Select>
                            </Form.Item>
                            <Form.Item>
                                <Space size="small" style={{ marginLeft: 10 }}>
                                    <Button type="primary" htmlType="submit">
                                        查询
                                    </Button>
                                    <Button onClick={this.onReset}>重置</Button>
                                </Space>
                            </Form.Item>
                        </Form> */}
                        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                            onGetValues={(values) => this.onFormSearch(values)}
                            onReset={(values) => this.onReset(values)}
                        >
                        </TheQueryForm>
                        <TheTableExtend
                            columns={columns}
                            onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                            onTableRefresh={() => this.getListByTree()}
                            onColumnsFilter={(value) => this.onColumnsFilter(value)}
                        >
                        </TheTableExtend>
                        <TheTable
                            scroll={{ x: "max-content", y: '63vh' }}
                            columns={newColumns}
                            dataSource={dataSource}
                        />
                        <ThePagination
                            pageNo={pageData.pageNo}
                            pageSize={pageData.pageSize}
                            total={total}
                            pageChange={this.pageChange}
                        /></Col>

                </Row>
                <Modal title={modalTitle} visible={isModalVisible} width="50%"
                    onCancel={() => this.setState({ isModalVisible: false })} footer={null}>
                    <WarnTable dataSource={warnData} rowStoreId={rowStoreId} goodsSkuNo={goodsSkuNo}></WarnTable>
                </Modal>
            </div>
        );
    }
}
